{% extends 'todo/base.html' %}

{% block content %}
    <div class="report-container">
        <h2>任务完成率报表</h2>
        <p>当前月份: {{ year }}年{{ month }}月</p>

        {% if graphic %}
            <div class="chart-container">
                <img src="data:image/png;base64,{{ graphic }}" alt="任务完成情况图表">
            </div>
        {% else %}
            <div class="no-data-alert">
                <p>这个月还没有已完成的任务，快去完成一个吧！</p>
            </div>
        {% endif %}
    </div>

    <style>
        .report-container {
            padding: 20px;
            background-color: var(--card-bg-color);
            border-radius: 8px;
        }
        .chart-container {
            margin-top: 20px;
        }
        .chart-container img {
            max-width: 100%;
            height: auto;
        }
        .no-data-alert {
            padding: 15px;
            background-color: #ffc107;
            color: #333;
            border-radius: 5px;
            text-align: center;
        }
    </style>
{% endblock %} 